import React, {Component} from 'react';
import {Form, Input, Button, Icon} from 'antd';
class Search extends Component{
  constructor(props){
    super(props);
    this.state = {
      username: '',
      mobile: ''
    };
  }

  handleChange = (e) => {
    let name = e.target.name;
    this.setState({
      [name]: e.target.value
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    let {username, mobile} = this.state;
    this.props.doSearch({username, mobile});
  }

  render() {
    let {username, mobile} = this.state;
    return (<Form onSubmit={this.handleSubmit} layout="inline">
      <Form.Item label="用户名：">
        <Input value={username} name="username" onChange={this.handleChange} prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名" />
      </Form.Item>
      <Form.Item label="手机：">
        <Input value={mobile} name="mobile" onChange={this.handleChange} prefix={<Icon type="phone" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="手机" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">搜索</Button>
      </Form.Item>
    </Form>);
  }
}

const WrappedSearch = Form.create({})(Search);
export default WrappedSearch;